<template>
  <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" :options="options" />
  <div class="formContainer">
    <h3>智慧校园-学生学业质量分析系统</h3>
    <el-form ref="loginFormRef" :model="loginForm" status-icon :rules="rules" label-width="80px" size="large"
      class="demo-ruleForm" @keyup.enter="submitForm(loginFormRef)">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" autocomplete="on" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" type="password" />
      </el-form-item>
      <el-form-item>
        <div class="button">
          <el-button type="primary" @click="submitForm(loginFormRef)">登录</el-button>
          <el-button @click.stop="resetForm(loginFormRef)">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import options from '../utils/config'
import useUserStore from '../store/useUserStore';
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus';
const router = useRouter()
const loginFormRef = ref()
const loginForm = reactive({
  username: '',
  password: ''
})
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ]
})
const particlesLoaded = async container => {
  // console.log("Particles container loaded", container);
};
const { changeUser } = useUserStore()
const submitForm = (formEl) => {
  // console.log(formEl);
  formEl.validate(async (valid, fields) => {
    console.log(loginForm);
    if (valid) {
      try {
        //Promise.any()哪个成功执行哪一个
        const res = await Promise.any([axios.post("/admin/users/login",loginForm),axios.post("/admin/students/login", {
          studentname: loginForm.username,
          password: loginForm.password
        })])
        // const res = await axios.post("/admin/users/login",loginForm)
        // const res = await axios.post("/admin/students/login", {
        //   studentname: loginForm.username,
        //   password: loginForm.password
        // })
        console.log('user', res.data);
        let { message, data } = res.data
        if (message === 'OK') {
          changeUser(data)
          router.push("/index")
        } else {
          ElMessage.error('用户名密码不匹配')
        }
      } catch (error) {
        ElMessage.error('用户名密码不匹配')
      }

    } else {
      console.log('error submit!', fields)
      return false
    }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped lang='scss'>
.formContainer {
  width: 600px;
  height: 400px;
  background-color: rgba(55, 13, 131, 0.3);
  // background-color: rgb(55, 13, 131);
  // opacity: 0.3;
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  margin-left: -300px;
  margin-top: -200px;
  color: white;
  font-size: 30px;
  border-radius: 20px;

  :deep(.el-form-item__label) {
    color: white;
  }

  :deep(.el-form-item) {
    width: 550px;
  }

  :deep(.el-form-item--large) {
    margin-bottom: 45px;
  }

  .button {
    width: 500px;
    display: flex;
    justify-content: space-between;
  }
}
</style>